// 获取待办事项数组
let toDoList = JSON.parse(window.localStorage.getItem("todoList")) || [];

let type = "all";

// ------------------------获取元素-----------------------------

// 01-获取新建输入框
const input_new_box = document.querySelector(".list_input");
// 02-获取待办元素列表
const todoList_box = document.querySelector(".list");
// 03-获取选项卡
const filter_box = document.querySelector("#filter_box");
//04-获取body
const box = document.querySelector("body");
// 05-获取全选标签对象
const all_label_box = document.querySelector(".all_label");

// ------------------渲染页面----------------------------

showItem_1();
function showItem_1() {
  // 01-加入判断是否全部完成(flag = true 即为全部完成)
  var flag = if_allFinish(toDoList);
  // 02-加入插入列表字符串
  var list_text = "";
  // 03-加入列表序号
  var t_index = 0;
  // 04-加入未完成数量
  var uncomp = 0;

  // 开始渲染
  // 渲染全选标签
  if (flag && toDoList.length) {
    all_label_box.style.color = "black";
  } else {
    all_label_box.style.color = "#e6e6e6";
  }

  // 渲染待办列表
  for (let i = 1; i <= toDoList.length; i++) {
    if (toDoList[i - 1].isFin == false) {
      uncomp += 1;
    }
  }

  for (let i = 1; i <= toDoList.length; i++) {
    // 根据状态选项卡显示待办列表
    if (
      (type == "active" && toDoList[i - 1].isFin == false) ||
      type == "all" ||
      (type == "comp" && toDoList[i - 1].isFin == true)
    ) {
      t_index += 1;
      list_text += `<li r-index = "${i}"t-index = "${t_index}">
      <label for="comp" class="mission_label" t-index = "${t_index}" r-index = "${i}" 
      ></label>
      <input class="mission" type="text" value="${
        toDoList[i - 1].title
      }" readonly="true"/>
      <button class="destroy" t-index = "${t_index}" r-index = "${i}">×</button>
    </li>`;
    }
  }

  // 渲染双击列表编辑

  //   插入待办事项
  todoList_box.innerHTML = list_text;

  //   判断是否显示选项卡（有待办事项就显示）
  if (toDoList.length) {
    var filter_text = "";
    filter_text += `<ul class="filter">
  <li>${uncomp} item left</li>
  <li class="all">All</li>
  <li class="active">active</li>
  <li class="comp">completed</li>
  
  `;
    if (uncomp < toDoList.length) {
      filter_text += `<li class="des_comp">Clear completed</li>`;
    }

    filter_text += `</ul>`;

    filter_box.innerHTML = filter_text;

    // 渲染选项卡的边框
    var temp1 = document.querySelector(".all");
    var temp2 = document.querySelector(".active");
    var temp3 = document.querySelector(".comp");
    if (type == "all") {
      temp1.style.borderColor = "#efd5d5";
      temp2.style.borderColor = "transparent";
      temp3.style.borderColor = "transparent";
    } else if (type == "active") {
      temp2.style.borderColor = "#efd5d5";
      temp1.style.borderColor = "transparent";
      temp3.style.borderColor = "transparent";
    } else {
      temp3.style.borderColor = "#efd5d5";
      temp1.style.borderColor = "transparent";
      temp2.style.borderColor = "transparent";
    }
  } else {
    filter_box.innerHTML = "";
  }

  // 渲染事项是否完成
  var finish_label_box = document.querySelectorAll(".list label");
  if (type == "all") {
    for (let i = 1; i <= finish_label_box.length; i++) {
      if (toDoList[i - 1].isFin) {
        finish_label_box[
          i - 1
        ].style.backgroundImage = ` url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E')`;
        todoList_box.childNodes[i - 1].childNodes[3].style.color = "#DCDCDC";
        todoList_box.childNodes[i - 1].childNodes[3].style.textDecoration =
          "line-through";
      } else {
        finish_label_box[
          i - 1
        ].style.backgroundImage = `url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E')`;
        todoList_box.childNodes[i - 1].childNodes[3].style.color = "black";
        todoList_box.childNodes[i - 1].childNodes[3].style.textDecoration =
          "none";
      }
    }
  } else if (type == "active") {
    for (let i = 1; i <= finish_label_box.length; i++) {
      finish_label_box[
        i - 1
      ].style.backgroundImage = ` url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E')`;
      todoList_box.childNodes[i - 1].childNodes[3].style.color = "black";
      todoList_box.childNodes[i - 1].childNodes[3].style.textDecoration =
        "none";
    }
  } else {
    for (let i = 1; i <= finish_label_box.length; i++) {
      finish_label_box[
        i - 1
      ].style.backgroundImage = ` url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E')`;
      todoList_box.childNodes[i - 1].childNodes[3].style.color = "#DCDCDC";
      todoList_box.childNodes[i - 1].childNodes[3].style.textDecoration =
        "line-through";
    }
  }
}

// -----------加入事件--------------------------------------------

// 事件1：加入单击事件

box.addEventListener("click", function (event) {
  target = event.target;
  console.log(target.className);
  // 01-已完成/未完成 按钮勾选
  if (target.className == "mission_label") {
    var i = Number(target.parentNode.getAttribute("r-index"));
    if (toDoList[i - 1].isFin) {
      // 更改背景图标
      event.target.style.backgroundImage = `url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E')`;
      // 更改文字样式

      //   更新localStorage
      toDoList[i - 1].isFin = false;
      window.localStorage.setItem("todoList", JSON.stringify(toDoList));
    } else {
      // 更改背景图标
      event.target.style.backgroundImage = ` url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E')`;

      // 更改文字样式
      // todoList_box.childNodes[i - 1].childNodes[3].style.textDecoration =
      //   "line-through";
      // todoList_box.childNodes[i - 1].childNodes[3].style.color = "#DCDCDC";
      //   更新localStorage
      toDoList[i - 1].isFin = true;
      window.localStorage.setItem("todoList", JSON.stringify(toDoList));
    }
    showItem_1();
  }

  // 02-删除选项
  if (target.className == "destroy") {
    var i = Number(target.parentNode.getAttribute("r-index"));

    // 删除指定项
    toDoList = toDoList.filter((item) => item.index != i);

    // 更新列表序列index
    for (var j = 1; j <= toDoList.length; j++) {
      toDoList[j - 1].index = j;
    }

    console.log(toDoList);
    // 更新localstorage
    window.localStorage.setItem("todoList", JSON.stringify(toDoList));
    showItem_1();
  }

  // 03-选项卡All
  if (target.className == "all") {
    type = "all";
    showItem_1();
  }
  // 04-选项卡All
  if (target.className == "active") {
    type = "active";
    showItem_1();
  }
  // 05-选项卡All
  if (target.className == "comp") {
    type = "comp";
    showItem_1();
  }

  // 06-全选选项
  if (target.className == "all_label") {
    var flag = if_allFinish(toDoList);
    console.log(flag);

    if (flag) {
      for (let i = 1; i <= toDoList.length; i++) {
        toDoList[i - 1].isFin = false;
      }
    } else {
      for (let i = 1; i <= toDoList.length; i++) {
        toDoList[i - 1].isFin = true;
      }
    }

    // 存入localStorage
    window.localStorage.setItem("todoList", JSON.stringify(toDoList));
    showItem_1();
  }

  //07-清除已完成的事项clear completed
  if (target.className == "des_comp") {
    toDoList = toDoList.filter((temp) => {
      return !temp.isFin;
    });

    // 更新列表序列index
    for (var j = 1; j <= toDoList.length; j++) {
      toDoList[j - 1].index = j;
    }

    // 存入localStorage
    window.localStorage.setItem("todoList", JSON.stringify(toDoList));
    showItem_1();
  }
});

// 事件2：加入键盘事件
box.addEventListener("keydown", function (event) {
  // 获取键盘输入（兼容）
  const code = event.keyCode || e.which;
  //获取当前输入框
  const target = event.target;

  if (target.classList.value == "list_input") {
    if (code == 13) {
      // 获取输入框的值
      var content = target.value.trim();
      if (content) {
        // 创建新对象准备加入数组中
        var temp = new Object();
        temp.index = toDoList.length + 1;
        temp.title = content;
        temp.isFin = false;

        // 清空输入框
        target.value = "";
        // 存入数组
        toDoList.push(temp);
        // 存入localStorage
        window.localStorage.setItem("todoList", JSON.stringify(toDoList));
      }
    }

    showItem_1();
  }
});

// 判断是否全部完成函数
function if_allFinish(list) {
  var all_flag = true;
  for (let i = 1; i <= list.length; i++) {
    if (!list[i - 1].isFin) {
      all_flag = false;
    }
  }
  return all_flag;
}
